<template>
  <div class="emp-wrap">
    <el-row :gutter="20">
      <el-col :span="6" style="height: 565px;overflow: auto;">
        <div class="grid-content bg-purple">
          <!-- <el-tree
            :data="DataList"
            show-checkbox
            node-key="id"
            :default-expand-all="true"
            :props="defaultProps">
          </el-tree> -->
          <el-tree
            ref="treeDepart"
            :data="DataList"
            :props="{ children: 'dson', label: 'institutionName' }"
            node-key="id"
            :default-expand-all="true"
            show-checkbox
            accordion
            @check="handleDepartChange"
          >
          </el-tree>
        </div>
      </el-col>
      <el-col :span="13">
        <div class="grid-content bg-purple">
          <el-input placeholder="请输入内容" prefix-icon="el-icon-search" size="medium" 
            v-model="empsSearchVal">
          </el-input>
          <div class="emp-list">
            <el-table v-loading="loading" ref="singleTable" :data="empData.staffList" @row-click="handleCurrentChange"
              :row-class-name="tableRowClassName" size="medium" :header-cell-style="{ textAlign: 'center' }" :cell-style="{ textAlign: 'center' }">
              <el-table-column prop="empId" label="部门" width="90"> </el-table-column>
              <el-table-column prop="name" label="姓名" width="90"></el-table-column>
              <el-table-column prop="deptName" label="科室" width="100" show-overflow-tooltip> </el-table-column>
              <el-table-column prop="deptName" label="专业技术职务" width="130" show-overflow-tooltip></el-table-column>
              <el-table-column prop="deptName" label="联系电话" show-overflow-tooltip> </el-table-column>
            </el-table>
            <div class="emp-page">
              <el-pagination small @current-change="handleCurrentPage" :current-page.sync="cur" :page-size="pageSize"
                :pager-count="5" :background="true" layout="prev, pager, next, total" :total="empData.total">
              </el-pagination>
            </div>

          </div>
        </div>
      </el-col>
      <el-col :span="5">
        <div class="grid-content bg-purple emp-choose">
          <span style="line-height: 40px">已选择：</span>
          <el-button size="small" style="float: right;" @click="handleClear">清空</el-button>
          <el-card class="box-card" shadow="never">
            <div v-if="chooseEmpArr.length > 0" style="width: 100%;">
              <el-row v-for="item in chooseEmpArr" :key="item.empId" class="text item">
                <!-- <el-col :span="4"><span>{{ item.empId }}</span></el-col> -->
                <el-col :span="5"><span>{{ item.name }}</span></el-col>
                <el-col :span="14"><span>{{ item.deptName }}</span></el-col>
                <el-col :span="1"><i class="el-icon-circle-close" @click="delEmpInfo(item.empId)"></i></el-col>
              </el-row>
            </div>
          </el-card>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import {DataList} from '@/utils/authority11.js'
import { getStaffList1, getUnitsList } from '@/api/newUsertest'
export default {
  name: "Emp",
  props: {
    // empData: Object,
    ChooseInfoOld: Array,
    value: String,
    // loading: Boolean,
    // currentPage: Number,
  },
  data () {
    return {
      loading: false,
      empsSearchVal: '',
      cur: 1,
      pageSize: 10,
      // tableData: [],
      chooseEmpArr: [],
      isExist: false,
      DataList: DataList,   //树结构数据
      defaultProps: {
        children: 'dson',
        label: 'institutionName'
      },
      currentPage: 1,
      empData: {}, // 员工列表接口数据
    }
  },
  mounted () {
    // this.recoverData();
    // this.$nextTick(() => {
    //   this.$emit('choose-emp',this.chooseEmpArr);
    // });
    this.getStaffInfo(this.empsSearchVal)
  },
  watch: {
    // 通过输入的关键字自动检索
    empsSearchVal (val) {
      this.getStaffInfo(val)
    },
    value (val) {
      this.empsSearchVal = val;
    },
    
    ChooseInfoOld: {
      immediate: true,
      handler (newVal) {
        this.chooseEmpArr = [].concat(newVal);
        this.$emit('choose-emp',this.chooseEmpArr);
      }
    }
  },
  methods: {
    /**
     * 恢复上次没有点击确定之前的数据
     */
    recoverData () {
      console.log(this.ChooseInfoOld)
      if (this.ChooseInfoOld.length) {
        this.chooseEmpArr = [].concat(this.ChooseInfoOld);
      } else {
        this.chooseEmpArr = []
      }

    },

     // 获取员工数据
     getStaffInfo (Approval) {
      let params = {
          key: Approval,
          pageSize: 10,
          currentPage: this.currentPage,
      };
      this.loading = true;
      getStaffList1({ params }).then(res => {
        // debugger
          if (res.code == 20000) { 
            this.empData = res.data
            this.currentPage = res.data.pagenum
            this.loading = false;
          }
      })
    },
    //勾选/取消勾选部门
    handleDepartChange(data, self, child) {
      let nodes = this.$refs.treeDepart.getCheckedKeys();
      let nodesStr = nodes.join(",");
      if (!nodesStr || nodes.length == 0) {
        return;
      }
      let params = {
          key: this.empsSearchVal,
          pageSize: 10,
          currentPage: this.currentPage,
      };
      this.loading = true;
      getStaffList1({params})
        .then((res) => {
          this.empData = res.data
          this.currentPage = res.data.pagenum
        })
        .finally(() => {
          this.loading = false;
        });
    },
    tableRowClassName (row) {
      if (this.chooseEmpArr.find((item) => item.empId == row.row.empId)) {
        return "row-select";
      }
      return "";
    },
    /**
     * 点击当前表格数据
     */
    handleCurrentChange (newVal) {
      let vm = this;
      if (newVal) {
        vm.chooseEmpArr.filter((item, index) => {
          if (item.empId == newVal.empId) {
            vm.chooseEmpArr.splice(index, 1)
            return vm.isExist = true;
          }
        })
        if (!vm.isExist) {
          vm.chooseEmpArr.push(newVal);
          vm.$emit('choose-emp', vm.chooseEmpArr);
        } else {
          vm.isExist = false;
        }
      }
    },
    /**
     * 删除选中员工信息
     */
    delEmpInfo (delVal) {
      let vm = this;
      debugger
      vm.chooseEmpArr = vm.chooseEmpArr.filter((item) => {
        return item.empId != delVal;
      })
      console.log(vm.chooseEmpArr)
      // this.$refs.singleTable.setCurrentRow();
      vm.$emit('choose-emp', vm.chooseEmpArr);
    },
    /**
     * 改变当前页码
     */
    handleCurrentPage (val) {
      this.currentPage = val;
      this.getStaffInfo(this.empsSearchVal);
      // this.$emit('change-page', val);
    },
   
    /**
     * 清空操作
     */
    handleClear () {
      // this.$refs.singleTable.setCurrentRow();
      this.chooseEmpArr = [];
      this.$emit('choose-emp', this.chooseEmpArr);
      this.$emit('is-clear-btn', true);
    }
  }
}
</script>
<style lang="scss" scoped>
::v-deep .el-table .cell {
  white-space: nowrap !important;
}
.emp-wrap {
  .grid-content {
    text-align: left;

    .emp-list {
      position: relative;
      margin-top: 15px;
      width: 100%;
      height: 515px;
      border: 1px solid #DCDCDC;
      border-radius: 3px;
      background: #F8F8F8;

      .emp-page {
        position: absolute;
        bottom: 0px; //-28px
        width: 100%;
        border-top: 1px solid #DCDCDC;
      }
    }

    .text {
      font-size: 14px;
    }

    .item {
      padding: 5px 0 5px 0;
      display: flex;
      justify-content: space-between;
    }

    .box-card {
      height: 515px;
      margin: 10px 0px 20px 0px;

    
      .el-icon-circle-close {
        float: right;
        cursor: pointer;
      }
    }

  
  }
}
::v-deep .row-select{
    background-color: #169bd5;
    color: white;
  }
  ::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell{
    color: #606266;
  }
</style>

